<!--
 * @Author: libing 9852442+liu-sheng-8667@user.noreply.gitee.com
 * @Date: 2024-04-11 21:34:16
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2024-12-31 14:36:16
 * @FilePath: \crm\pages\customer\customer-info.vue
 * @Description: 客户详情
-->
<template>
  <view class="customer-info">
    <!-- 头部 -->
    <view class="customer-header">
      <u-navbar title="客户详情" :autoBack="true" bgColor="transparent" />
      <!-- 企业--客户类型 -->
      <view class="company-item">
        <CompanyItem :item="info" />
      </view>
      <!-- nav 导航 -->
      <view class="nav-list">
        <u-tabs :list="navList" @change="changeHandle"></u-tabs>
      </view>
    </view>
    <!-- 内容区域--- -->
    <view class="content" style="padding-bottom: 200rpx">
      <!-- 基础信息 -->
      <view v-if="currentNavIndex === 0">
        <view class="customer-content">
          <InfoItem :info="orderInfo" title="订单信息" />
        </view>
        <view class="customer-content">
          <InfoItem :info="otherInfo" title="其他信息" />
        </view>
      </view>
      <!-- 跟进信息 -->
      <view v-if="currentNavIndex === 1">
        <view
          v-for="(item, index) in list"
          :key="index"
          style="padding: 0 10px"
        >
          <FollowItem :item="item" />
        </view>
        <u-loadmore iconType="circle" :status="status" />
      </view>
      <view v-if="currentNavIndex === 2">
        <view
          v-for="(item, index) in list"
          :key="index"
          style="padding: 0 10px; background: #ffffff"
        >
          <LianxiItem :item="item" isActive />
        </view>
        <u-loadmore iconType="circle" :status="status" />
      </view>
    </view>
    <view class="btn-wrap">
      <u-row justify="space-between">
        <!-- <u-col span="3">
          <view class="demo-layout" @tap="onUpdateHandle">
            <u-icon name="file-text"></u-icon>
            编辑
          </view>
        </u-col> -->
        <!-- <u-col span="3">
          <view class="demo-layout" @tap="addContacts">
            <u-icon name="arrow-downward"></u-icon>
            添加联系人
          </view>
        </u-col> -->
        <u-col span="3">
          <view class="demo-layout" @tap="addFollow">
            <u-icon name="edit-pen"></u-icon>
            写跟进
          </view>
        </u-col>
      </u-row>
    </view>
    <!-- 领取客户 -->
    <u-popup
      :show="popupShow"
      @close="closePopup"
      :round="17"
      mode="center"
      bgColor="transparent"
    >
      <view class="collect-customers">
        <image :src="$z.imgsrc('dialog-bg.png')" class="collet-bg" />
        <view class="content">
          <view>
            <view class="content-title">领取客户</view>
            <view class="content-des">是否确认领取客户？</view>
          </view>
          <view class="bottom-wrap">
            <view style="width: 245rpx">
              <u-button
                type="primary"
                :plain="true"
                text="取消"
                color="#D9D9D9"
              ></u-button>
            </view>
            <view style="width: 245rpx">
              <u-button type="primary" text="确定" color="#DC2626"></u-button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import CompanyItem from "./conponents/company-item.vue";
import InfoItem from "./conponents/info-item.vue";
import FollowItem from "./conponents/follow-item.vue";
import LianxiItem from "./conponents/lianxi-item.vue";
import {
  getCompanyInfo,
  getCompanyFollowList,
  getCompanyStaffList,
} from "@/apis/customer";
export default {
  name: "customer-info",
  components: {
    CompanyItem,
    InfoItem,
    FollowItem,
    LianxiItem,
  },
  onLoad(data) {
    this.customerId = data.id;
  },
  onShow() {
    this._getCompanyInfo();
    this.getList();
  },
  data() {
    return {
      info: {},
      customerId: "",
      popupShow: false,
      currentNavIndex: 0,
      navList: [
        {
          name: "基本信息",
        },
        {
          name: "跟进信息",
        },
        {
          name: "联系人",
        },
      ],
      orderInfo: [
        {
          lable: "客户名称",
          value: "",
          prop: "name",
        },
        {
          lable: "部门",
          value: "",
          prop: "",
        },
        {
          lable: "职位",
          value: "",
          prop: "",
        },
        {
          lable: "电话",
          value: "",
          prop: "",
        },
        {
          lable: "手机号",
          value: "",
          prop: "phone",
        },
        {
          lable: "邮箱",
          value: "",
          prop: "mailbox",
        },
        {
          lable: "地址",
          value: "地址+详细地区",
          prop: "area",
          format: (rows) => {
            const val = rows.province + rows.city + rows.region + rows.address;
            return val;
          },
        },
      ],
      otherInfo: [
        {
          lable: "负责人",
          value: "-",
        },
        {
          lable: "负责人部门",
          value: "-",
        },
        {
          lable: "创建人",
          value: "-",
        },
        {
          lable: "创建时间",
          value: "-",
        },
        {
          lable: "最近跟进",
          value: "-",
        },
        {
          lable: "渠道",
          value: "-",
        },
        {
          lable: "线索来源",
          value: "-",
        },
        {
          lable: "备注",
          value: "-",
        },
      ],
      list: [],
      status: "more",
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      contentText: {
        contentdown: "查看更多",
        contentrefresh: "加载中",
        contentnomore: "没有更多",
      },
      queryApi: getCompanyFollowList,
    };
  },
  // mounted() {
  //   this._getCompanyInfo();
  // },
  methods: {
    // 编辑
    // 领取客户
    openPopup() {
      this.popupShow = true;
    },
    closePopup() {
      this.popupShow = false;
    },
    // 写跟进
    addFollow() {
      uni.navigateTo({
        url: "/pagesform/form/follow-form?id=" + this.customerId,
      });
    },
    // 添加联系人
    addContacts() {
      uni.navigateTo({
        url: "/pagesform/form/contacts-form?id=" + this.customerId,
      });
    },
    // 修改客户信息
    onUpdateHandle() {
      uni.navigateTo({
        url: "/pagesform/form/customer-form?id=" + this.customerId,
      });
    },
    // 获取基础信息
    async _getCompanyInfo() {
      const res = await getCompanyInfo(this.customerId);
      this.info = res;
      this.orderInfo.forEach((item) => {
        item.value = item.format ? item.format(res) : res[item.prop];
        return item;
      });
    },
    changeHandle(val) {
      const index = val.index;
      this.currentNavIndex = index;
      this.pagination.current = 1;
      this.list = [];
      this.status = "more";
      if (index === 1) {
        this.queryApi = getCompanyFollowList;
      }
      if (index === 2) {
        this.queryApi = getCompanyStaffList;
      }

      if (index !== 0) {
        this.getList();
      }
    },
    // 获取跟进列表
    async getList() {
      const body = {
        current: this.pagination.current,
        size: this.pagination.pageSize,
        customId: this.customerId,
      };
      const res = await this.queryApi(body);
      console.log(res);
      if (res) {
        let d = res.records;
        this.list = [...this.list, ...d];
        this.pagination.total = res.total;
      }
      this.status =
        this.list.length < this.pagination.total ? "more" : "noMore";
    },
    // 查看更多
    loadmore() {
      if (this.list.length < this.pagination.total) {
        this.pagination.current += 1;
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    // 滚动到底部
    lower() {
      this.loadmore();
    },
    // 重置数据
    upper() {
      this.pagination.current = 1;
      this.list = [];
      this.getList();
    },
    // // 获取联系人列表
    // async _getCompanyStaffList() {
    //   const res = await getCompanyStaffList(this.customerId);
    // },
  },
};
</script>
<style lang="scss" scoped>
.customer-info {
  background: #f2f4f5;
  min-height: 100vh;
}

.customer-header {
  width: 100%;
  // height: 618rpx;
  background: linear-gradient(#fbebeb 0%, #ffffff 100%);
}

.company-item {
  padding-top: 62rpx;
}

.nav-list {
  padding-top: 34rpx;
  height: auto;
  margin-bottom: 20rpx;
}

.customer-content {
}

.btn-wrap {
  padding: 22rpx 32rpx;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
  box-shadow: 0rpx -6rpx 10rpx 0rpx rgba(7, 28, 78, 0.02);
}
.demo-layout {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #121e2c;
  line-height: 37rpx;
}

.collect-customers {
  width: 598rpx;
  height: 562rpx;
  border-radius: 16rpx;
  position: relative;
  background: #ffffff;

  .collet-bg {
    width: 100%;
    height: 310rpx;
  }

  .content {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 240rpx;
    text-align: center;

    .content-title {
      font-weight: 500;
      font-size: 42rpx;
      color: #171a1d;
      line-height: 59rpx;
      margin-bottom: 10rpx;
    }

    .content-des {
      font-size: 28rpx;
      color: #838589;
      line-height: 40rpx;
    }
  }

  .bottom-wrap {
    padding: 83rpx 40rpx 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>
